<template>
  <div class="dashboard-editor-container">
    <dv-full-screen-container style="height: 100% !important;">
      <div style="height: 100%;">
        <!-- 头部header  -->
          <Moduleheader></Moduleheader>
        <!-- body主体区域 -->
        <div class="section">
          <div class="colunm">
            <div class="pannelone">
              <dv-border-box-8>
                <Leftbox></Leftbox>
              </dv-border-box-8>
            </div>
            <div class="pannelone">
              <dv-border-box-8>
                <!-- 父组件传值给子组件使用prop属性传值 -->
                <Chartleft :typeChart="'pie'"></Chartleft>
              </dv-border-box-8>
            </div>
            <div class="pannelone">
              <dv-border-box-8>
                <Introduce></Introduce>
              </dv-border-box-8>
            </div>
          </div>
          <div class="colunm">
            <div class="panneltwo">
              <dv-border-box-1>
                <Caroucel></Caroucel>
              </dv-border-box-1>
            </div>
            <div class="panneltwo">
              <dv-border-box-1>
                <Staremenmber></Staremenmber>
              </dv-border-box-1>
            </div>
            <div class="panneltwo">
              <dv-border-box-1>
                <Newsshow></Newsshow>
              </dv-border-box-1>
            </div>
          </div>
          <div class="colunm">
            <div class="pannelthree">
              <dv-border-box-8>
                <LineChart></LineChart>
              </dv-border-box-8>
            </div>
            <div class="pannelthree">
              <dv-border-box-8>
                <Activedetail></Activedetail>
              </dv-border-box-8>
            </div>
            <div class="pannelthree">
              <dv-border-box-8>
                <Finace></Finace>
              </dv-border-box-8>
            </div>
          </div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import LineChart from "../views/modulemiddle/lineChart.vue";
import Caroucel from "../views/modulemiddle/caroucel.vue";
import Leftbox from "../views/modulemiddle/leftbox.vue";
import Chartleft from "../views/modulemiddle/chartleft.vue";
import Finace from "../views/modulebottom/financemessage.vue";
import Introduce from "../views/modulebottom/introduce.vue";
import Activedetail from "../views/modulebottom/activedetail.vue";
import Staremenmber from "../views/modulebottom/staremenmber.vue";
import Newsshow from "../views/modulebottom/newsshow.vue";
import  Prop from './bigscreenprop/bigscreenprop.vue'
import Moduleheader from './moduleheader'

// 引入接口

export default {
  name: "",
  components: {
    LineChart,
    Caroucel,
    Leftbox,
    Chartleft,
    Introduce,
    Finace,
    Activedetail,
    Staremenmber,
    Newsshow,
    Prop,
    Moduleheader,

  },
  
 
};
</script>

<style lang="scss" scoped>
$color-blue: #0d3d7f;
$font-color: #09f5fc;
$text-color: #fff;

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  
}
#dv-full-screen-container{
  height: 100% !important;
  transform: translate(-50%, -50%);
}
.dashboard-editor-container {
  // background: url("../assets/bigscreen.png") no-repeat center center;
    background: url("../assets/images/u1032.png") no-repeat center center;
  //  background: url("../assets/images/bj02.jpg");
  width: 100%;
   height: 100%;
  background-size: cover;
  .section {
    display: flex;

    height: calc(100% - 70px);
    .colunm {
      flex: 3;
      height: 100%;
      .pannelone {
      height: 20%;
      }

      .pannelone:nth-child(2) {
         height: 35%;

      }

      .pannelone:nth-child(3) {
        height: 45%;
      }

      .pannelthree {
         height: 50%;

      }

      .pannelthree:nth-child(2) {
         height: 25%;

      }

      .pannelthree:nth-child(3) {
         height: 25%;


      }
    }
    .colunm:nth-child(2) {
      flex: 5;

      .panneltwo {
        height: 50%;

      }

      .panneltwo:nth-child(2) {
        height: 25%;

      }

      .panneltwo:nth-child(3) {
        height: 25%;

      }
    }
  }
}
</style>
